<template>
  <el-dialog width="80%" :close-on-click-modal="false" :title="title" :model-value="isShow" @open="onOpen"
    @close="onClose">
    <div class="app-container">
     
        <ComponentSearchBarNoCard placeholder="输入名称搜索" v-model:name="query.name" @query = "onSearch" />

        <!--表格渲染-->
        <el-table v-loading="listLoading" :data="list" border fit highlight-current-row
          style="width: 100%; margin-top: 10px">
         
          <el-table-column :show-overflow-tooltip="true" prop="name" label="药材名">
            <template #default="scope">
              <el-link type="primary" @click="gotodetail">{{ scope.row.name }}</el-link>
            </template>

          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" prop="name" label="类别">
            <template #default="scope">
             
                {{ scope.row.tag.name }}
             
            </template>
          </el-table-column>

          <el-table-column :show-overflow-tooltip="true" prop="pinYin" label="拼音" />
          <el-table-column prop="yaoDian" label="药典" />

          <el-table-column align="center" label width="240">
            <template #default="scope">
              <el-button type="primary" @click="onSelect(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>

        <ComponentPagination :total="total" v-model:page-size="query.pageSize" v-model:page="query.currentPage" />

    

    </div>
  </el-dialog>
</template>

<script>
import { queryData } from "@/api/zhongyi/yaocai";

export default {
  name: "yaocaiselect",
  components: {},
  props: {
    isShow: {
      require: true,
      type: Boolean,
      default: false,
    },
    title: {
      require: true,
      type: String,
      default: "",
    },
  },
  data() {
    return {
      query: {
        name: '',
        pageSize:10,
        currentPage:1
      },
      list: null,
      total: 0,
      listLoading: true
    };
  },
  computed: {},
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      queryData(this.query).then((res) => {
        this.list = res.result.data;
        this.total = res.result.total;
        this.listLoading = false;
      });
    },
    onSelect(row) {
      this.$emit("onSelect", row)
    },
    onChange() {
      // this.getList();
    },
    onSearch(query) {
      this.query = query;
      this.getList();
    },
    gotodetail(row) {
      this.$router.push({
        name: 'yaocaidetail',
        params: { id: row.id }
      }) // -> /user/123
    },
    onOpen() {

    },
    onClose() {
      this.$emit("update:isShow", false)
    },
  },
  mounted: function () { },
  watch: {
    'query.currentPage': {
      handler(val, oldVal) {
        //console.log('watch', this.query)
        this.getList();
      },
      deep: true
    },
    'query.pageSize': {
      handler(val, oldVal) {
        //console.log('watch', this.query)
        this.getList();
      },
      deep: true
    },
  }
};
</script>


